<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #my3dspace {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 50%;
      overflow: hidden;
    }
    #pagegroup {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      -webkit-transform-style: preserve-3d;
      position: relative;
    }
    .page {
      width: 360px;
      height: 360px;
      padding: 20px;
      background-color: black;
      color: white;
      font-weight: bold;
      font-size: 360px;
      line-height: 360px;
      text-align: center;
      position: absolute;
    }
    #page1 {
      -webkit-transform-origin: bottom;
      -webkit-transition: -webkit-transform 1s linear;
    }
    #page2,#page3,#page4,#page5,#page6 {
      -webkit-transform-origin: bottom;
      -webkit-transition: -webkit-transform 1s linear;
      -webkit-transform: rotateX(90deg);
    }
    #op {
      text-align: center;
      margin: 40px auto;
    }
  </style>
</head>
<body>
  <div id="my3dspace">
    <div id="pagegroup">
      <div id="page1" class="page">1</div>
      <div id="page2" class="page">2</div>
      <div id="page3" class="page">3</div>
      <div id="page4" class="page">4</div>
      <div id="page5" class="page">5</div>
      <div id="page6" class="page">6</div>
    </div>
  </div>
  <div id="op">
    <a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">prev</a>
  </div>
</body>
</html>
<script>
  var curIndex = 1;
  function next() {
    if (curIndex == 6) {
      return
    }
    var curPage = document.getElementById("page" + curIndex);
    curPage.style.webkitTransform = "rotateX(-90deg)";
    curIndex++;
    var nextPage = document.getElementById("page" + curIndex);
    nextPage.style.webkitTransform = "rotateX(0deg)";
  }
  function prev() {
    if (curIndex == 1) {
      return;
    }
    var curPage = document.getElementById("page" + curIndex);
    curPage.style.webkitTransform = "rotateX(90deg)";
    curIndex--;
    var prevPage = document.getElementById("page" + curIndex);
    prevPage.style.webkitTransform = "rotateX(0deg)";
  }
</script>
